<template>
	<view class="user-info-pools-page comm-page-bg-1">
		<!-- #ifndef  H5 -->
		<custom-navbar title="分红池" :percent="percent" is-back></custom-navbar>
		<!-- #endif -->
		
		<view class="empty-box" v-if="isEmpty">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<view 
			v-else
			class="list" 
			v-for="(item, index) in list"
			:key="index">
			
			
			<view class="list__header">{{ item.distributionIdentity.name }}</view>
			<view class="list__body">
				<view 
					class="list-item" 
					v-for="(op, opInd) in props"
					:key="opInd">
					<text class="label">
						{{ op.formLabel ? op.formLabel(item) : op.label }}
					</text>
					<text class="value">
						 {{ op.formValue ? op.formValue(item) : item[op.prop] }} 
					</text>
				</view>
			</view>
			<view class="list__footer"> 成为{{ item.distributionIdentity.name }}时间：{{ item.create_time }}</view>
		</view>
	</view>
</template>

<script>
	import { userPool } from "@/api/user"
	export default {
		data() {
			return {
				percent: 0,
				loading: false,
				finished: false,
				/**
				 * 后台返回的一个是一个 分销身份。每个身份下会有
				 * 本月预分红，上月已分红，累计分红，当前合伙人。成为合伙人时间
				 */
				list: [],
				/**
				 * 支持 formLabel 对 文案做差异化处理，例如不同的身份，显示不同的文案
				 * 支持 formValue 对 数据做差异化处理。
				 */
				props: [
					{ label: '本月预分红:', prop: 'now_month_will_get'},
					{ label: '本月已分红:', prop: 'now_month_have_get'},
					// { 
					// 	label: '当前合伙人:', 
					// 	prop: 'num',
					// 	formLabel(item){
					// 		// 根据不同身份,显示不同的文案
					// 		return this.label
					// 	},
					// 	formValue(item) {
					// 		return  item[this.prop]
					// 	}
					// },
					{ label: '上月已分红:', prop: 'last_month_have_get'},
					{ label: '累计分红:', prop: 'total_get'},
					
				]
			}
		},
		computed: {
			isEmpty() {
				if (this.finished) {
					return !this.list.length
				}
				return false
			}
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
		},
		created() {
			this.getJsonData()
		},
		methods: {
			// 在这里写数据请求的逻辑。
			
			getJsonData() {
				this.loading = true
				this.finished = false
				// 请求成功后给 this.list 赋值
				userPool()
				.then((res) => {
					this.list = res;
				}).finally(() => {
					this.loading = false
					this.finished = true
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.empty-box {
		padding: 300rpx 50rpx;
	}
	.user-info-pools-page {
		height: 100vh;
		padding: 20rpx;
	}
	.list {
		margin: 20rpx 0 ;
		padding: 0 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		
		
	}
	.list__header,
	.list__body,
	.list__footer {
		padding: 20rpx;
	}
	
	.list__header {
		font-size: 31rpx;
		color: #626262;
		font-weight: bold;
	}
	
	.list__body {
		border-top: 1rpx solid #dddddd;
		border-bottom: 1rpx solid #dddddd;
		.list-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			padding: 5rpx;
			margin: 5rpx;
		}
		.label {
			display: flex;
			display: inline-block;
			width: 150rpx;
			font-size: 25rpx;
			color: #666666;
		}
		.value {
			display: inline-block;
			font-size: 25rpx;
			color: #ff8200;
			font-weight: 700;
		}
	}
	
	.list__footer {
		text-align: right;
		color: #666666;
		font-size: 18rpx;
	}

</style>
